<template>
  <div>
    <div
      ref="card"
      :class="['card-body', { 'card-body-active': props.cardActive.includes(props.item.id) }]"
    >
      <img
        src="@/assets/patient/knowledgeData/checked.png"
        class="check-img"
        v-show="props.cardActive.includes(props.item.id)"
      />
      <div class="card-left">
        <img src="~@/assets/patient/knowledgeData/imgpost.png" class="imgpost" />
        <div :class="['custom-tag', props.item.status === '1' ? 'current-tag' : 'abolish-tag']">
          <div :class="props.item.status === '1' ? 'current-tag-text' : 'abolish-tag-text'">
            {{ getDictLabel(DICT_TYPE.ACTIVE_STATUS, props.item.status) }}
          </div>
        </div>
      </div>
      <div class="card-right">
        <div class="card-name">
          <el-tooltip
            class="item"
            effect="light"
            :content="props.item.name"
            placement="bottom-start"
            :visible-arrow="false"
            :open-delay="500"
          >
            <div class="card-name-text">
              {{ props.item.name }}
            </div>
          </el-tooltip>
        </div>
        <div class="card-date">发布日期: {{ props.item.publishDate }}</div>
        <div class="card-date">实施日期: {{ props.item.execDate }}</div>
        <div class="card-date">废止日期: {{ props.item.abortDate }}</div>
        <div class="other-operate">
          <div class="operate-box1" @click.stop="previewFile(props.item.textAttachmentUrl)">
            <img src="~@/assets/patient/knowledgeData/btn-vies.png" class="img" />
            <span>预览</span>
          </div>
          <div class="operate-box2" @click.stop="downloadFile(props.item)">
            <img src="~@/assets/patient/knowledgeData/btn-download.png" class="img" />
            <span>下载</span>
          </div>
        </div>
        <img
          v-if="props.isShowMore"
          src="~@/assets/patient/knowledgeData/btn-more.png"
          class="img-more"
          @click.stop="moreClick = props.item.name"
        />
      </div>
      <div
        class="more-box"
        v-show="moreClick === props.item.name"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
      >
        <div class="edit" @click.stop="openDialog(props.item)" v-hasPermi="['bussiness:knowledge-base:update']">
          <img src="~@/assets/patient/knowledgeData/btn-edit.png" />
          <span class="more-text">编辑</span>
        </div>
        <div class="delete" @click.stop="deleteCard(props.item.id)" v-hasPermi="['bussiness:knowledge-base:delete']">
          <img src="~@/assets/patient/knowledgeData/btn-del.png" />
          <span class="more-text">删除</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
import * as KnowledgeDataApi from '@/api/patient/knowledgeData'
// 父组件传值()
const props = defineProps<{
  item: any
  cardActive: any[]
  isShowMore: boolean
}>()

const emit = defineEmits<{
  (e: 'preview-file', url: any): void
  (e: 'handle-edit',item: any): void
  (e: 'get-lists'): void
}>()

// 状态定义
const moreClick = ref('')
let hideTimeout: NodeJS.Timeout | null = null

// 预览
const previewFile = (url: any) => {
  emit('preview-file', url)
}

// 下载文件
const downloadFile = async (item: any) => {
  if (!item.textAttachmentUrl) {
    ElMessage.error('文件地址无效');
    return;
  }
  try {
    const link = document.createElement('a');
    link.href = item.textAttachmentUrl;
    link.download = item.name || 'downloaded_file'; // 设置下载文件的默认名称，如果未提供名称则使用默认值
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    ElMessage.success('文件下载成功');
  } catch (error) {
    ElMessage.error('文件下载失败');
  }
}

// 打开弹窗
const openDialog = (item: any) => {
  emit('handle-edit',item)
}

// 删除
const deleteCard = async (id: string | number) => {
  try {
    await ElMessageBox.confirm('确定要删除选中的法规文件吗?', '提示', { type: 'warning' })
    await KnowledgeDataApi.deleteKnowledgeData(id);
    ElMessage.success('删除成功')
    emit('get-lists')
  } catch {
    
  }
}

// 操作框显隐控制
const handleMouseEnter = () => {
  if (hideTimeout) {
    clearTimeout(hideTimeout)
    hideTimeout = null
  }
}

const handleMouseLeave = () => {
  hideTimeout = setTimeout(() => {
    moreClick.value = ''
  }, 500)
}
</script>
<style lang="scss" scoped>
.card-body {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 478px;
  height: 150px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  border: 1px solid #e8e8e8;
  padding: 12px;
  cursor: pointer;
  .check-img {
    position: absolute;
    right: 7px;
    top: 7px;
  }
  .card-left {
    position: relative;
    width: 137px;
    height: 100%;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    .custom-tag {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 7px;
      top: 8px;
      width: 44px;
      height: 2.2222vh;
      border-radius: 5px;
    }
    .current-tag {
      background-color: #e4f8ee;
      border: 1px solid #6fcf99;
      .current-tag-text {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        line-height: 14px;
        color: #18be6a;
      }
    }
    .abolish-tag {
      background-color: #fef3e9;
      border: 1px solid #fbbe92;
      .abolish-tag-text {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        line-height: 14px;
        color: #f68d2b;
      }
    }
  }
  .card-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 300px;
    height: 100%;
    .card-name {
      width: 100%;
      height: 36px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 16px;
      line-height: 18px;
      color: #333333;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .card-date {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
    .other-operate {
      display: flex;
    }
    .operate-box1 {
      display: flex;
      align-items: center;
      // width: 50px;
      cursor: pointer;
    }
    .operate-box2 {
      display: flex;
      align-items: center;
      // width: 50px;
      margin-left: 18px;
      cursor: pointer;
    }
    .img {
      width: 16px;
      height: 16px;
    }
    .img-more {
      position: absolute;
      right: 15px;
      bottom: 9px;
      cursor: pointer;
    }
  }
  .more-box {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: absolute;
    right: 15px;
    bottom: -10px;
    width: 78px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px solid #eaeaea;
    z-index: 1111;
    .edit,
    .delete {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .edit:hover,
    .delete:hover {
      color: #1989fa;
    }
    .more-text {
      margin-left: 7px;
    }
  }
}
.card-body-active {
  border: 1px solid #1989fa;
}
.card-body:hover {
  border: 1px solid #1989fa;
}
.imgpost {
  width: 100%;
  height: 100%;
}
</style>
